<template>
    <div style="width: 100%;height:100vh;overflow:hidden;">
      <div style="width:100%;text-align:center">
          <div style="margin-top:40px;">
              <el-avatar :src="src" :size="100" title="管理员"></el-avatar>
          </div>
      </div>
      <div style="width: 100%;text-align:center;margin-top:60px;display:flex;margin-left:20%">
          <div style="width: 150px;">
              <a href="#">
                  <i class="el-icon-office-building" style="color:rgb(125, 95, 173)"></i><br>
                  <el-popover
                      placement="bottom-start"
                      title="学历"
                      width="100"
                      trigger="hover"
                      content="本科/遵义医科大学">
                      <el-button type="text" slot="reference">学历</el-button>
                  </el-popover>
              </a>
          </div>
          <div style="width: 150px;">
              <a href="#">
                  <i class="el-icon-star-off" style="color:rgb(144, 173, 95)"></i><br>
                  <el-popover
                      placement="bottom-start"
                      title="年龄"
                      width="100"
                      trigger="hover"
                      content="21岁">
                      <el-button type="text" slot="reference">年龄</el-button>
                  </el-popover>
              </a>
          </div>
          <div style="width: 150px;">
              <a href="#">
                  <i class="el-icon-guide" style="color:rgb(173, 146, 95)"></i><br>
                  <el-popover
                      placement="bottom-start"
                      title="坐标"
                      width="100"
                      trigger="hover"
                      content="地球村/中国/贵州/遵义">
                      <el-button type="text" slot="reference">坐标</el-button>
                  </el-popover>
              </a>
  
          </div>
          <div style="width: 150px;">
             <a href="#">
                  <i class="el-icon-mobile-phone" style="color:rgb(173, 118, 95)"></i><br>
                  <el-popover
                      placement="bottom-start"
                      title="联系方式"
                      width="210"
                      trigger="hover"
                      content="Email/19923807615@163.comQQ/5174812">
                      <el-button type="text" slot="reference">联系方式</el-button>
                  </el-popover>
             </a> 
          </div>
      </div>
      <div style="width: 60%;text-align:center;margin-top:30px;color:#414040;font-size:20px;margin-left:20%">
          你好！我是来自遵义的一枚小程序员。制作该blog的主要就是为了完成毕业设计，当然也是为了分析自己再Java学习方面的
          相关学习经历或者笔记。希望各位读者也能持之以恒、不放弃！！
      </div>
    </div>
  </template>
  
  <script>
  export default {
      name:'Forme',
      data(){
          return{
              src:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          }
      },
  }
  </script>
  <style scoped>
  i{
      border: 1px #95b064 solid;
      border-radius: 140px 140px;
      width:100px;
      height:100px;
      font-size: 60px;
      line-height: 100px;
  }
  </style>